<template>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-info">
                <Image class="profile-info-avatar" round fit="cover" :src=userStore.avatar></Image>
                <span class="profile-info-nickname">{{ userStore.nickName }}</span>

                <span class="profile-info-address align">
                    <var-chip type="default" size="mini" v-if="userStore.permissions[0] == 0">VIP</var-chip>
                    <var-chip type="warning" size="mini" v-else>VIP</var-chip>

                    {{ userStore.userName }}
                </span>
            </div>
        </div>

        <!-- <CellGroup class="action-group">
          <Cell icon="user-circle-o" title="Edit the avatar" is-link />
          
          <Cell icon="clock-o" title="My order" is-link @click="order"/>
      </CellGroup>
      <CellGroup class="action-group">
          <Cell icon="envelop-o" title="Opinion feedback" is-link />
          <Cell icon="info-o" title="About the version" is-link />
      </CellGroup>
      <CellGroup class="action-group">
          
          <Cell icon="close" title="Logout" is-link
          @click="onLogout" />
          
      </CellGroup> -->
        <var-paper :elevation="2" class="action-group">

            <var-cell icon="bell" title="Notice" @click="inform">
                <template #extra>

                    <var-icon name="chevron-right" />

                </template>
            </var-cell>
            <var-cell icon="format-list-checkbox" title="My Booking" @click="booking">
                <template #extra>

                    <var-icon name="chevron-right" />

                </template>
            </var-cell>

            <var-cell icon="account-circle-outline" title="Logout" @click="onLogout">
                <template #extra>
                    <var-icon name="chevron-right" />
                </template>
            </var-cell>

        </var-paper>
    </div>
</template>

<script setup name="Profile">
import { Image, Icon, Grid, GridItem, CellGroup, Cell } from 'vant';
import { useUserStore } from '@/stores/user';
import { useRouter } from "vue-router";

const userStore = useUserStore();
const router = useRouter();

function onLogout() {
    userStore.LogOut().then(() => {
        router.push({ path: "/login" });
    });
}

function booking() {
    router.push({ path: "/my/profile1" })
}


</script>
<style lang="scss" scoped>
.profile-container {
    .action-group {
        margin-top: 10px;
    }

    .profile-header {
        &::before {
            content: '';
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            width: 100%;
            height: 240px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

        width: 100%;
        height: 220px;
        background-image: url("../profile2/background.png");
        background-size: cover;

        display:flex;
        justify-content: center;
        align-items: center;

        .profile-info {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: #f0f0f0;

            &-avatar {
                border: 3px solid #f0f0f0;
                width: 80px;
                height: 80px;
            }

            &-nickname {
                font-size: 20px;
                margin: 7px;
            }

            &-address {
                font-size: 14px;
                margin: 5px 5px 0px 5px;
            }
        }


    }
}
</style>